class CustomBoard {
    constructor(viewer, position, style) {
        this.viewer = viewer;
        this.position = position;
        this.style = style;
        this.createDom();
        viewer.cesiumWidget.container.appendChild(this.container);
        this.addPostRender();
        //this.addPoint();
        this.container.getElementsByClassName("hot-spot")[0].style.backgroundImage = "url(" + style.bgImageUrl + "/home_icon_21.png)";
        this.container.getElementsByClassName("hot-spot-board")[0].style.backgroundImage = "url(" + style.bgImageUrl + "/home_icon_20.png)";
        var this_container = this.container
        setTimeout(function() {
            this_container.getElementsByClassName("hot-spot")[0].style.backgroundImage = "url(" + style.bgImageUrl + "/home_icon_18.png)";
            this_container.getElementsByClassName("hot-spot-board")[0].style.backgroundImage = "url(" + style.bgImageUrl + "/home_icon_19.png)";
        }, 200);

        this.container.onmouseover = e => {
            this.container.getElementsByClassName("hot-spot")[0].style.backgroundImage = "url(" + style.bgImageUrl + "/home_icon_21.png)";
            this.container.getElementsByClassName("hot-spot-board")[0].style.backgroundImage = "url(" + style.bgImageUrl + "/home_icon_20.png)";
        }

        this.container.onmouseout = e => {
            this.container.getElementsByClassName("hot-spot")[0].style.backgroundImage = "url(" + style.bgImageUrl + "/home_icon_18.png)";
            this.container.getElementsByClassName("hot-spot-board")[0].style.backgroundImage = "url(" + style.bgImageUrl + "/home_icon_19.png)";
        }

    }

    //添加点图元
    addPoint() {
        this.viewer.entities.add({
            position: this.position,
            point: {
                pixelSize: 10,
                color: Cesium.Color.RED,
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            }
        })
    }

    //创建dom
    createDom() {
        this.container = document.createElement("div");
        this.container.innerHTML =
            `<div class="hot-spot" style="pointer-events: none !important;">
            <div class="hot-spot-board hot-spot-board-medium" style="display: flex;align-items: center;top: -190px;padding: 15px 15px;height: 42px;transform: translateX(-32%);background-size: 100% 100%;">
              <h5> ` + this.style.chineseTitle + `</h5>
            </div>
            <div class="hot-spot-line hot-spot-line-medium"></div>
          </div>`;

    }

    //添加场景事件
    addPostRender() {
        this.viewer.scene.postRender.addEventListener(this.postRender, this);
    }

    //场景渲染事件 实时更新标签的位置 使其与笛卡尔坐标一致
    postRender() {
        if (!this.container || !this.container.style) return;
        const canvasHeight = this.viewer.scene.canvas.height;
        const windowPosition = new Cesium.Cartesian2();
        Cesium.SceneTransforms.wgs84ToWindowCoordinates(this.viewer.scene, this.position, windowPosition);
        this.container.style.position = "absolute";
        this.container.style.bottom = canvasHeight - windowPosition.y - 22 + "px";
        const elWidth = this.container.offsetWidth;
        this.container.style.left = windowPosition.x - (elWidth / 2) - 35 + "px";
        let level = this.style.level || 50000
        if (this.viewer.camera.positionCartographic.height > level) {
            this.container.style.display = "none";
        } else {
            this.container.style.display = "block";
        }
        var bottom = canvasHeight - windowPosition.y - 22
        var left = windowPosition.x - (elWidth / 2) - 35
        if (bottom == -22 || left == -35) {
            this.container.style.display = "none";
        } else {
            this.container.style.display = "block";
        }
    }

    //关闭 
    windowClose() {
        this.container.remove(); //删除dom
        this.viewer.scene.postRender.removeEventListener(this.postRender, this); //移除事件监听
    }

}